@import './bass';
.head{
    width: 100%;
    height: 130px;
    float:left;
    // position: fixed;
    z-index: 1000;
.wrap{
    width: 1264px;
    height: 130px;
    position: fixed;
    background:#1f1f20;
    &-top-head{
        width: 100%;
        height: 90px;
        border-bottom: 1px solid #333333;
        .game-logo{
            float: left;
            margin-top: 30px;
        }
        .shop-logo{
            float: left;
            margin-top:15px;
            margin-left:32px;
        }
       .info{
           height: 30px;
           width: 554px;
           float: right;
           margin-top: 30px;
           .login{
               display:block;
               float: left;
               width: 78px;
               height: 30px;
               font-size: 14px;
               border-radius: 5px;
               text-decoration: none;
               color: $color;
               line-height: 30px;
               text-align: center;
               background-color:#333435;
               &:hover{
                   background-color: #f85535;
                   color:white
               }
           }
           .register{
            display:block;
            float: left;
            font-size: 14px;
            width: 78px;
            height: 30px;
            border-radius: 5px;
            text-decoration: none;
            color: $color;
            line-height: 30px;
            text-align: center;
            background-color:#333435;
            margin-left: 10px;
            &:hover{
                background-color: #f85535;
                color:white
            }
           }
           .order{
            display:block;
            float: left;
            padding-left: 10px;
            font-size: 14px;
            width: 81px;
            height: 30px;
            border-radius: 5px;
            text-decoration: none;
            color: $color;
            line-height: 30px;
            text-align: center;
            background-color:#333435;
            margin-left: 10px;
            background: url('/images/my-order.png') no-repeat 0 6px;
            &:hover{
                color:#f85535;
                background: url('/images/hover-order.png') no-repeat 0 6px;
            }
           }
           .likes{
            display:block;
            float: left;
            font-size: 14px;
            width: 81px;
            padding-left: 10px;
            height: 30px;
            border-radius: 5px;
            text-decoration: none;
            color: $color;
            line-height: 30px;
            text-align: center;
            background-color:#333435;
            background: url('/images/my-favorite.png') no-repeat 0 8px;
            margin-left: 10px;
            &:hover{
                background-color: #f85535;
                color:#f85535;
                background: url('/images/hover-favorite.png') no-repeat 0 8px;
            }
           }
           .cart{
            display:block;
            float: left;
            padding-left: 20px;
            font-size: 14px;
            width: 101px;
            height: 30px;
            border-radius: 5px;
            text-decoration: none;
            color: $color;
            line-height: 30px;
            text-align: center;
            background-color:#333435;
            margin-left: 10px;
            background: url('/images/my-car.png') no-repeat 0 6px;
            &:hover{
                background-color: #f85535;
                color:#f85535;
                background: url('/images/hover-car.png') no-repeat 0 6px;
            }
            span{
                float:right;
            }
           }
           
       }
    }
    &-bottom-head{
        width: 100%;
        height: 39px;
        background: #1f1f20;
        line-height: 39px;
        font-size: 16px;
        .nav{
            float: left;
            width: 900px;
            height: 29px;
           a{
               padding:7px 10px;
               color:$color;
               display: inline;
               margin-right: 20px;
               position: relative;
               text-decoration: none;
               &:hover{
                   border-bottom: 2px solid #f85535;
               }
           }  
            
        }
        .search{
            width: 180px;
            height: 34px;
            background: green;
            display: flex;
            float:right;
            input{
                width: 100px;
                flex: 1;
                color:white;
                height: 34px;
                float: left;
                padding-left: 10px;
                background: #191919;
                outline: none;
                border:none;
            }
            a .btn-search{
                width: 39px;
                height: 39px;
                // background: yellow;
                float: right;
                background: url('/images/search.png') #333333 no-repeat center 8px;
            }
        }
    }
}
}
//右侧悬挂的nav
.right-float-nav{
    width: 50px;
    height: 313px;
    position: fixed;
    z-index: 999;
    right:30px;
    display: flex;
    flex-direction: column;
    top:150px;
    background: #1f1f20;
    .float-person{
        display: block;
        width: 50px;
        height: 50px;
        background: url('/images/my-order.png') no-repeat center center;
        &:hover{
            background: url('/images/light-order.png') no-repeat center center;
        }
    }
    .float-likes{
        display: block;
        width: 50px;
        height: 50px;
        background: url('/images/my-favorite.png') no-repeat center center;
        &:hover{
            background: url('/images/light-favorite.png') no-repeat center center;
        }
    }
    .float-carts{
        display: block;
        flex: 1;
        width: 50px;
        position: relative;
        // word-break: break-all; 文字竖着
        text-align: center;
        // line-height:150px ;
        text-decoration: none;
        color:white;
        font-weight: 600;
        background: url('/images/red-car.png') #f85535 no-repeat center 20px;
        &:hover{
            background: url('/images/now-car.png') #ff795e no-repeat center 20px;
        }
        span{
            display: block;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background:white;
            line-height: 25px;
            text-align: center;
            position: absolute;
            left:13px;
            bottom:20px;
            color:#f85535;
        }
        b{
            display: block;
            margin-top: 42px;
        }
    }
    .float-connect{
        display: block;
        width: 50px;
        height: 50px;
        background: url('/images/server.png') no-repeat center center;
        &:hover{
            background: url('/images/light-server.png') no-repeat center center;
        }
    }
}

.cartbag{
    width: 30px;
    height: 30px;
    border:1px solid;
    position: fixed;
    top:300px;
    right:30px;
    visibility: hidden;
}
// 登录页面
.login-page{
    width: 626px;
    display: none;
    height: 385px;
    border: 1px solid #979797;
    border-top: 3px solid #dc4949;;
    position:fixed;
    top:200px;
    right: 300px;
    background-color: #fff;
    z-index: 999;
    &-left{
        width: 267px;
        height: 385px;float: left;
        background: url('/images/1mlogin.png') no-repeat;
    }
    &-right{
         width: 267px;
         height: 385px;
         float: left;
         >h6{
             font-size:14px;
             color:#999;
             margin-left: 30px;
             margin-top: 40px;
             margin-bottom: 40px;
         }
         #lusername{
             width: 200px;
             height: 38px;
             border: 1px solid #979797;
             padding-left: 40px;
             box-sizing: border-box;
             margin-bottom: 28px;
             border-radius: 5px;
             margin-left: 30px;
             outline: none;
             background: url('/images/username.png') no-repeat 10px center;
         }
         #lpassword{
             outline: none;
            width: 200px;
            margin-left: 30px;
            padding-left: 40px;
            box-sizing: border-box;
            border-radius: 5px;
            height: 38px;
            border: 1px solid #979797;
            background: url('/images/password.png') no-repeat 10px center;
         }
         #login-button{
             width: 92px;
             height: 36px;
             border: 0 none;
             color: #fff;
             font-size: 14px;
             font-weight: bold;
             margin-right: 10px;
             background-color: #dc4949;
             border-radius: 5px;
             margin-top: 30px;
             margin-left: 90px;
             outline: none;
         }
    }
    .close{
        width: 46px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        float: right;
        color:#666;
        cursor: pointer;
        &:hover{
            background-color: #dc4949;
            color:white;
        }
    }
}
#islogin{
    display: none;
    color: #999;
    float:left;
    font-size: 14px;
    margin-top: 5px;
    cursor: pointer;
    &:hover{
        color:white;
    }
    #exit{
       text-decoration: none;
       color: #999;
       &:hover{
           color:white;
       }
    }
}
//搜索时创建出来的ul
#searchFrame{
    width: 135px;
    height: 250px;
    white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // border:1px solid white;
    position: absolute;
    top:130px;
    right:40px;
    // overflow-x: hidden;
    color:white;
    z-index: 2000;
}